<template>
  <div class="skeleton">
    <div class="skeleton_top" >推荐{{ content }}</div>
<!--    由于后端数据尚未处理好（没有对用户（医生、病人）进行分类），暂时只显示医生列表的信息-->
    <div class="item" v-for="item in userList" :key="item.index" v-show="item.userType=='1'">
      <el-container>
        <el-aside width="100px">
          <el-avatar size="large"
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          />
        </el-aside>
        <el-container>
          <el-header height="50px">姓名：{{ item.name }}</el-header>
          <el-main>性别：{{ item.sex }}</el-main>
          <el-footer height="100px">电话：{{ item.phone }}</el-footer>
        </el-container>
      </el-container>
    </div>
<!--    <div class="item" v-for="item in userList" :key="item.index">-->
<!--      <p>{{item.name}}    {{item.sex}}    {{item.phone}}</p>-->
<!--    </div>-->
  </div>


</template>

<script>
import { Toast } from "vant";
import {onMounted, reactive, ref} from "vue";
import axios from "axios";
export default {
  name: "skeleton",
  props: {},
  data() {
    return {
      content: '',
      userList:[],
      loading:false,
    };
  },
  created() {
    let user_type = this.$store.state.user_type;
    if (user_type == 1) {
      //是医生
      this.content = "病人";
    } else if (user_type == 2) {
      this.content = "医生";
    } else {
      Toast.fail("出现错误啦");
    }

    const loading = ref(true);
    onMounted(() => {
      loading.value = false;
    });

    //测试请求方法
    const options = {
      method: 'GET',
      url: 'http://106.54.189.155:6768/user/queryAll',
    };
    axios.request(options).then((response) => {
      this.userList=response.data.data;
      console.log(response.data);
    }).catch(function (error) {
      console.error(error);
    });
  },

};
</script>

<style lang="scss" scope>
.skeleton {
  background-color: #fafafa;
  margin-bottom: 120px;
  &_top {
    padding-left: 30px;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 540;
  }
  &_item{
    width: 100%;
    display: flex;
    margin-left: 10px;
  }
}

</style>
